<template>
  <div v-show="show" :class="`alert alert-${type} alert-dismissible`">
    <button @click="close" type="button" class="close">
      <span>x</span>
    </button>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "Message",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "success"
    },
    msg: {
      type: String,
      default: ""
    }
  },
  // 组件父子传下来的属性可被观察
  watch: {
    show(value) {
      if (value) {
        // 将回调延迟到下次 DOM 更新循环之后执行
        this.$nextTick(() => {
            // $el只读，Vue实例的根Dom元素
            // Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
          this.$el.scrollIntoView(true);
        });
      }
    }
  },

  methods: {
    close() {
      //vue2.3+ update:myPropName触发事件，对组件prop为show的属性进行“双向绑定”赋值为false
      this.$emit("update:show", false);
    }
  }
};
</script>

<style>
</style>
